<template>
  <div>
    <zeda-dialog
      v-model="visible"
      width="80%"
      title="配电详情"
      :before-close="handleClose"
    >
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>
      <el-tabs
        ref="tabs"
        v-model="activeName"
        class="text-tabs TTB-no-gutter TTB-gutter"
        @tab-click="change"
      >
        <el-tab-pane label="电压" name="0"></el-tab-pane>
        <el-tab-pane label="电流" name="1"></el-tab-pane>
        <el-tab-pane label="功率" name="2"></el-tab-pane>
      </el-tabs>
      <el-table :data="records" border class="mt20" max-height="500">
        <el-table-column
          prop="devicename"
          :label="
            activeName === '0'
              ? '设备电压'
              : activeName === '1'
              ? '设备电流'
              : '设备功率'
          "
          align="center"
        ></el-table-column>
        <el-table-column prop="operation" label="最新值" align="center">
          <el-table-column
            prop="newNum"
            label="数值"
            align="center"
            :width="numWidth"
          >
          </el-table-column>
          <el-table-column
            prop="newTime"
            label="更新时间"
            align="center"
            :width="timeWidth"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column prop="operation" label="当日极值" align="center">
          <el-table-column prop="operation" label="最高值" align="center">
            <el-table-column
              prop="maxNum"
              label="数值"
              align="center"
              :width="numWidth"
            >
            </el-table-column>
            <el-table-column
              prop="maxTime"
              label="更新时间"
              align="center"
              :width="timeWidth"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column prop="operation" label="最低值" align="center">
            <el-table-column
              prop="minNum"
              label="数值"
              align="center"
              :width="numWidth"
            >
            </el-table-column>
            <el-table-column
              prop="minTime"
              label="更新时间"
              align="center"
              :width="timeWidth"
            >
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="averageNum"
          label="平均值"
          align="center"
        ></el-table-column>
      </el-table>
      <!-- <el-pagination
        style="text-align: right; margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
      <form-button
        slot="footer"
        cancel-text="关闭"
        :show-submit-button="false"
        @cancel="handleClose"
      ></form-button>
    </zeda-dialog>
  </div>
</template>
<script>
import FormButton from "@/components/FormButton";
import { postExtremumlist } from "@/api/iot/inspect";
import { dealElectricity, secondChangedate } from "@/utils/index";
export default {
  components: {
    FormButton,
  },
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: "" },
  },
  data() {
    return {
      chartData: [],
      // 查询参数
      activeName: "0",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      apsForm: {
        formRef: "form",
        labelWidth: "120px",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {},
          formSoltButton: [
            {
              label: "导出",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-upload2",
              disabled: true,
              click: this.handleDerive,
            },
          ],
        },
      },
      records: [],
      cords: {},
      allData: {},
      deviceType: null, // 配电详情数据类型
      numWidth: 100,
      timeWidth: 180,
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.getInfo();
      }
    },
  },
  methods: {
    change() {
      const index = this.$refs.tabs.value;
      if (this.activeName === index) {
        return false;
      }
      this.getrecords();
    },
    getrecords() {
      this.cords = {};
      switch (this.activeName) {
        case "0":
          this.cords = this.allData?.voltage ?? {};
          break;
        case "1":
          this.cords = this.allData?.electricCurrent ?? {};
          break;
        case "2":
          this.cords = this.allData?.power ?? {};
          break;
      }
      this.delrecords();
    },
    /* 表格数据整理 */
    delrecords() {
      this.records = [];
      if (Object.keys(this.cords).length != 0 && this.cords != undefined) {
        let obj = {
          devicename: "",
          newNum: 0,
          newTime: "",
          maxNum: 0,
          maxTime: "",
          minNum: 0,
          minTime: "",
          averageNum: 0,
        };
        let arr = [];
        let tig = "";
        let tip = "";
        let unit = "";
        if (this.activeName === "0") {
          arr = this.deviceType == 3 ? ["a"] : ["a", "b", "c"];
          tig = "压";
          unit = "V";
          tip = "u";
        } else if (this.activeName === "1") {
          arr = this.deviceType == 3 ? ["a"] : ["a", "b", "c"];
          tig = "流";
          unit = "A";
          tip = "i";
        } else if (this.activeName === "2") {
          arr = this.deviceType == 3 ? ["p"] : ["p", "q", "vp", "pf"];
          unit = "KW";
        }
        arr.map((item) => {
          if (this.activeName === "0" || this.activeName === "1") {
            obj = {
              devicename:
                this.deviceType == 3
                  ? "电" + tig + "(" + unit + ")"
                  : item.toUpperCase() + "相电" + tig + "(" + unit + ")",
              newNum:
                this.activeName === "0"
                  ? dealElectricity(this.cords[tip + item] ?? 0)
                  : dealElectricity(this.cords[tip + item] ?? 0, 1000, 3),
              newTime: secondChangedate(
                this.cords["eventTime" + tip.toUpperCase() + item] * 1000
              ),
              maxNum:
                this.activeName === "0"
                  ? dealElectricity(this.cords[tip + item + "Max"] ?? 0)
                  : dealElectricity(
                      this.cords[tip + item + "Max"] ?? 0,
                      1000,
                      3
                    ),
              maxTime: secondChangedate(
                this.cords["eventTime" + tip.toUpperCase() + item + "Max"] *
                  1000
              ),
              minNum:
                this.activeName === "0"
                  ? dealElectricity(this.cords[tip + item + "Min"] ?? 0)
                  : dealElectricity(
                      this.cords[tip + item + "Min"] ?? 0,
                      1000,
                      3
                    ),
              minTime: secondChangedate(
                this.cords["eventTime" + tip.toUpperCase() + item + "Min"] *
                  1000
              ),
              averageNum:
                this.activeName === "0"
                  ? dealElectricity(
                      this.cords["average" + tip.toUpperCase() + item] ?? 0
                    )
                  : dealElectricity(
                      this.cords["average" + tip.toUpperCase() + item] ?? 0,
                      1000,
                      3
                    ),
            };
          } else if (this.activeName === "2") {
            let devicenameF = "";
            let pig = "";
            if (this.deviceType != 3) {
              switch (item) {
                case "p":
                  devicenameF = "有功功率";
                  pig = "P";
                  break;
                case "q":
                  devicenameF = "无功功率";
                  pig = "Q";
                  break;
                case "vp":
                  devicenameF = "视在功率";
                  pig = "Vp";
                  break;
                case "pf":
                  devicenameF = "功率因子";
                  pig = "Pf";
                  break;
              }
            } else {
              switch (item) {
                case "p":
                  devicenameF = "有功功率";
                  pig = "P";
                  break;
              }
            }
            obj = {
              devicename: devicenameF + "(" + unit + ")",
              newNum: dealElectricity(this.cords[item] ?? 0, 1000, 3),
              newTime: secondChangedate(this.cords["eventTime" + pig] * 1000),
              maxNum: dealElectricity(this.cords[item + "Max"] ?? 0, 1000, 3),
              maxTime: secondChangedate(
                this.cords["eventTime" + pig + "Max"] * 1000
              ),
              minNum: dealElectricity(this.cords[item + "Min"] ?? 0, 1000, 3),
              minTime: secondChangedate(
                this.cords["eventTime" + pig + "Min"] * 1000
              ),
              averageNum: dealElectricity(
                this.cords["average" + pig] ?? 0,
                1000,
                3
              ),
            };
          }
          this.records.push(obj);
        });
      } else {
        this.records = [];
      }
    },
    /* 导出 */
    handleDerive() {},
    getInfo() {
      let params = {
        deviceCode: this.id,
      };
      postExtremumlist(params)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.activeName = "0";
          // 流水表为空的时传null
          if (res.data == null) {
            this.cords = {};
          } else {
            this.allData = res?.data ?? {};
            this.deviceType = res?.data?.deviceType ?? 1;
          }
          this.getrecords();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20006");
        });
    },
    handleClose(status) {
      this.$emit("close", typeof status === "boolean" ? status : false);
    },
  },
};
</script>
